<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>vue.js</title>
    <script src="/libs/vue.js"></script>
</head>

<body>
    <div id="app">
        <mantou>{{book}}</mantou>
        <newbaozi></newbaozi>
    </div>
    <div>
        <h2>参照： <span id="t"></span></h2>
        <script>
            let t = document.getElementById('t');
            setInterval(() => {
                t.textContent = new Date
            }, 200)
        </script>
    </div>
    <script>
        const mixin = {
            beforeCreate() {
                console.log('huomian')
            }
        }
        const m1 = {
            data() {
                return {
                    x: 1
                }
            }
        }
        const m2 = {
            data() {
                return {
                    x: 2,
                    y: 1
                }
            }
        }
        
        Vue.component("Mantou", {
            mixins: [mixin, m1, m2],
            template: "<div><h2>Mantou x: {{x}}, y: {{y}}</h2><slot></slot></div>"
        })

        const Baozi = Vue.component('Baozi', {
            props: {
                name: String
            },
            template: "<div><h2 @click='log'> {{name}} </h2></div>",
            methods: {
                log() {
                    console.log(Date.now(), this.name)
                }
            }
        })

        function HighOrderComp(comp) {
            return {
                data() {
                    return {
                        name: "a new Baozi"
                    }
                },
                beforeCreate() {
                    console.log("It is huomianing")
                },
                render(h) {
                    console.log(this.name)
                    return h(comp, { props: { name: this.name } })
                }
            }
        }


        

        new Vue({
            el: '#app',
            data() {
                return {
                    book: new Date
                }
            },
            mounted() {
                setInterval(() => {
                    this.book = new Date;
                }, 300)
            },
            components: {
                parent,
                'newbaozi': HighOrderComp(Baozi)
            }
        })
    </script>
</body>

</html>